<template>
	<view class="out"
		:style="{'height': topNavigationHeight - statusBarHeight + 'rpx', backgroundColor: mainColor, 'padding-top': statusBarHeight + 'rpx'}">
		<view class="title_out"
			:style="{height: topNavigationHeight - statusBarHeight + 'rpx'}">
			<!--  返回上一页图片  -->
			<image v-if="type == 'back'" class="image" src="/static/image/common/left.png" bindtap="goBack"></image>
			<image v-if="type == 'home'" class="image" src="/static/image/component/top_navigation/home.png"
				bindtap="goHome"></image>
			<!--  标题  -->
			<view :style="{height: menuButtonHeight + 'rpx', lineHeight: menuButtonHeight + 'rpx'}">
				{{title}}
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		name: "top-navigation",
		props: {
			// 类型  1.none 没有   2.back  返回上一页    3.home 回到首页
			type: {
				type: String,
				default: "none"
			},
			title: {
				type: String,
				default: "体重日志"
			}
		},
		data() {
			return {
				// 系统平台
				system: app.globalData.system,
				// 导航栏高度
				navigationHeight: app.globalData.navigationHeight,
				// 统一背景颜色
				unifyBgColor: app.globalData.unifyBgColor,
				// 顶部导航栏高度
				topNavigationHeight: app.globalData.topNavigationHeight,
				// 主色调
				mainColor: app.globalData.mainColor,
				// 状态栏高度（电量 wifi那一栏）
				statusBarHeight: 10,
				// 胶囊菜单上边距
				menuButtonPaddingHeight: 10
			}
		},
		mounted() {
			// 获取胶囊信息
			let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
			// 初始化系统参数 最大高度
			uni.getSystemInfo({
				success: (res) => {
					console.log('系统参数 : ', res);

					let windowHeight = res.windowHeight
					let windowWidth = res.windowWidth


					// 计算顶部导航栏的高度
					console.log('胶囊信息 : ', menuButtonObject)
					// 状态栏高度（电量 wifi那一栏）
					let statusBarHeightPx = res.statusBarHeight
					this.statusBarHeight = (750 / windowWidth) * statusBarHeightPx


					// 计算顶部导航栏的高度
					console.log('胶囊信息 : ', menuButtonObject)
					// 状态栏高度（电量 wifi那一栏）
					let statusBarHeight = res.statusBarHeight
					this.statusBarHeight = (750 / windowWidth) * statusBarHeightPx
					// 胶囊上边距
					let menuButtonPaddingHeight = menuButtonObject.top - statusBarHeight
					this.menuButtonPaddingHeight = (750 / windowWidth) * menuButtonPaddingHeight

				}
			});
		}
	}
</script>

<style>
	/*  外部  */
	.out {
		width: 100%;
		color: white;
	}

	/*  标题外部  */
	.title_out {
		position: relative;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/*  返回图片  */
	.image {
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		left: 30rpx;
	}
</style>
